<template>
  <div>
    <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :before-upload="beforeUpload" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :http-request="doUpload" :file-list="fileList" :class="{ disabled: fileList.length > 0 }">
      <i class="el-icon-plus" />
    </el-upload>
    <el-progress v-if="proShow" style="width: 200px" :percentage="percent" />
    <el-dialog :visible.sync="dialogVisible" :title="dialogImageName">
      <img width="100%" :src="dialogImageUrl">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5'
var cos = new COS({
  SecretId: 'AKID74mEPJxKPDk0zg6F7i25rMaXDbiY8RSC',
  SecretKey: 'VjfKglZ6ML3UeX9UXKp30f3A0Zsuf8LH'
})
export default {
  name: 'ImageUpload',
  props: {
    imgUrl: {
      type: String
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogImageName: '',
      dialogVisible: false,
      fileList: [],
      percent: 0,
      proShow: false
    }
  },
  watch: {
    imgUrl(newVal) {
      this.fileList = [{ url: newVal }]
    }
  },
  methods: {
    // 文件上传前的钩子
    beforeUpload(file) {
      this.dialogImageName = file.name
    },
    // 文件移除前的钩子
    handleRemove(file, fileList) {
      this.fileList = []
      cos.deleteObject(
        {
          Bucket: 'ihrm-1312511790', // 存储桶名字
          Region: 'ap-guangzhou', // 存储桶所在位置
          Key: this.dialogImageName // 上传到存储桶后的名字
        },
        (err, data) => {
          if (!err) {
            this.$message({
              showClose: true,
              center: true,
              type: 'success',
              message: '删除成功！'
            })
          } else {
            this.$message({
              showClose: true,
              center: true,
              type: 'error',
              message: '删除失败！'
            })
          }
        }
      )
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 自定义上传
    doUpload(data) {
      this.proShow = true
      cos.putObject(
        {
          Bucket: 'ihrm-1312511790', // 存储桶名字
          Region: 'ap-guangzhou', // 存储桶所在位置
          Key: data.file.name, // 上传到存储桶后的名字
          StorageClass: 'STANDARD', // 不要改
          Body: data.file, // 上传文件对象
          onProgress: (progressData) => {
            // 进度的回调函数
            this.percent = progressData.percent * 100
          }
        },
        (err, data) => {
          if (!err) {
            const url = 'http://' + data.Location
            this.fileList = [{ url }]
            this.$emit('update:imgUrl', url)
          }
          this.$message({
            showClose: true,
            center: true,
            type: 'success',
            message: '上传成功！'
          })(this.proShow = false), (this.percent = 0)
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
